<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="addMagnifierControl" />

  <title>HERE Maps API Example: Magnifying Glass</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>
  
  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js" 
    id="HereMapsLoaderScript" 
    data-map-container="mapContainer" 
    data-params="all" 
    data-callback="addMagnifierControl" 
    data-libs="magnifier"
    data-parent="demos/magnifying-glass/">
  </script>
    
  <link rel="icon" href="http://here.com/favicon.ico">
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Using Map Observers: Magnifying Glass</h1>
  <p>This example adds a custom map component, which displays 
    a mini-map showing the current location at a higher zoom-level.</p>
    
  <div id="mapContainer" style="width:540px; height:334px;"></div>
  <div id="src">
  <br/>
    <p>The control can be loaded using the following <code>&lt;script&gt;</code> element:
    <pre><code class='prettyprint'>&lt;script type="text/javascript" charset="UTF-8" src="<a href="libs/magnifier.js">libs/magnifier.js</a>"&gt;&lt;/script></code></pre>
    <p>Code:</p>
  </div>
<script id="example-code" data-categories="map,library" type="text/javascript">
//<![CDATA[
function addMagnifierControl(map) {
  map.components.add(new Magnifier(200, 200, 5));
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
